Skip to content

Add @xpecs/reativa package and split demo into view/impl tabs#9

Merged
brnrdog merged 1 commit into
mainfrom
claude/reativa-components-package-l87ozc
Jul 23, 2026
Merged

Add @xpecs/reativa package and split demo into view/impl tabs#9
brnrdog merged 1 commit into
mainfrom
claude/reativa-components-package-l87ozc

Conversation

@brnrdog

@brnrdog brnrdog commented Jul 23, 2026

Copy link
Copy Markdown
Owner

Expand the reativa (OCaml + Melange) examples into their own package, @xpecs/reativa — the ReasonML/OCaml sibling of @xpecs/xote — covering the same set xote does: 22 elements, 8 components, and 7 blocks, written in .mlx over Reativa.View with the same behaviour and accessibility semantics.

Package (packages/reativa):

  • One module per component (Button, Alert, Dialog, Select, StatGrid, …) plus shared Ui/Icons/Icon and a generated Contracts.ml (enum prop types derived from the specs' ## API contracts, so the OCaml compiler enforces the implementation can't drift from the spec — same guarantee as @xpecs/xote).
  • Registry.mlx renders one live example per spec (matching the website's Xote examples) and exports the JS surface the site consumes: mount_example, example_ids, built.
  • scripts/generate-contracts.mjs emits Contracts.ml; scripts/build.mjs clones reativa (pinned), compiles the sources inside its dune project with Melange, and bundles Registry.js to dist/reativa.bundle.js with esbuild.

Website:

  • The example block now has two tab strips: view (Preview / Playground / Code) and implementation (Xote / Reativa). The implementation strip swaps which library renders the live preview; Code stays the Xote source.
  • ReativaExamples reads example_ids from the bundle so the two never drift; build-reativa.mjs builds @xpecs/reativa and copies its bundle into the site.
  • Removes the old single-file website/reativa proof-of-concept.

Expand the reativa (OCaml + Melange) examples into their own package,
@xpecs/reativa — the ReasonML/OCaml sibling of @xpecs/xote — covering the
same set xote does: 22 elements, 8 components, and 7 blocks, written in .mlx
over Reativa.View with the same behaviour and accessibility semantics.

Package (packages/reativa):
- One module per component (Button, Alert, Dialog, Select, StatGrid, …) plus
  shared Ui/Icons/Icon and a generated Contracts.ml (enum prop types derived
  from the specs' `## API` contracts, so the OCaml compiler enforces the
  implementation can't drift from the spec — same guarantee as @xpecs/xote).
- Registry.mlx renders one live example per spec (matching the website's Xote
  examples) and exports the JS surface the site consumes: mount_example,
  example_ids, built.
- scripts/generate-contracts.mjs emits Contracts.ml; scripts/build.mjs clones
  reativa (pinned), compiles the sources inside its dune project with Melange,
  and bundles Registry.js to dist/reativa.bundle.js with esbuild.

Website:
- The example block now has two tab strips: view (Preview / Playground / Code)
  and implementation (Xote / Reativa). The implementation strip swaps which
  library renders the live preview; Code stays the Xote source.
- ReativaExamples reads example_ids from the bundle so the two never drift;
  build-reativa.mjs builds @xpecs/reativa and copies its bundle into the site.
- Removes the old single-file website/reativa proof-of-concept.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01TmsZSd9fQyhGdd4JbX7QLp
@brnrdog
brnrdog merged commit e34848c into main Jul 23, 2026
1 check failed
@brnrdog
brnrdog deleted the claude/reativa-components-package-l87ozc branch July 23, 2026 20:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants